<template>
  <div>
    <!-- i++ -> i = i + 1  -->
    <!-- async,await是promise.then的语法糖 -->
    <!-- v-model本质其实是一个简写方式（语法糖） -->
    <input type="text" v-model="msg" />
    <!-- 数据 -> 视图 -->
    <!-- 视图 -> 数据 -->
    <!-- v-model就是v-bind:value和@input的简写 -->
    <input type="text" :value="msg" @input="msg = $event.target.value" />
    <p>{{ msg }}</p>
    <hr />
    <!-- 组件上事件都是自定义事件 -->
    <!-- 组件上需要父向子 子向父这种双向通信的时候可以用v-model  -->
    <!-- 使用场景：当我们以后发现我们父组件要把数据传给子组件上，并且子组件要修改这个数据，这种双向通信就可以用
    v-model -->
    <!-- 只要是想使用v-model在组件上 子组件中props只能写value这个属性,自定义事件只能写@input -->
    <!-- v-model在组件上有缺点 只能有一个 如果有二个数据传用不了 -->
    <InputNumber :value="num" @input="num = $event"></InputNumber>
    <!-- 如果有一天,我们发现一个别人写的组件可以用v-model 说明这个别人写的组件
    内部属性props就是叫value,并且里面自定义事件就是叫@input  -->
    <!-- 假设有一天我们封装一个组件给别的同事使用 -->
    <InputNumber v-model="num"></InputNumber>
    <hr />
    <button @click="visible = true">显示</button>
    <!-- 规范 @update:变量名字 -->
    <!-- a -> update:a  -->
    <!-- <MyDialog :visible="visible" @update:visible="visible = $event"></MyDialog> -->
    <MyDialog :visible.sync="visible"></MyDialog>

    <!-- v-model 适合父子双向通信只有一个的时候
    sync 适合父子双向通信多个的时候 
    一般情况下,如果是表单类组件封装,建议使用v-model,如果是非表单相关的封装,建议使用sync  -->
  </div>
</template>

<script>
// visibility:hidden
import InputNumber from "@/components/InputNumber.vue";
import MyDialog from "@/components/MyDialog.vue";
export default {
  components: {
    InputNumber,
    MyDialog,
  },
  data() {
    return {
      msg: "hello",
      num: 1,
      visible: false,
    };
  },
  methods: {
    // fn(e) {
    //   this.msg = e.target.value;
    // },
  },
};
</script>

<style scoped></style>
